<template>
  <view class="item-content" v-if="list.length">
    <view class="header">
      {{title}}
    </view>
    <view class="list">
      <view @click="$emit('click',item.searchWord)" class="item" v-for="item,index in list" :key="index">
        <view class="idx">
          {{index+1}}
        </view>
        <text class="text">{{item.searchWord}}</text>
      </view>

    </view>
  </view>
</template>
<script setup>
  defineProps({
    title: {
      type: String,
      default: '标题'
    },
    list: {
      type: Array,
      default: () => []
    }
  })
</script>
<style lang="less" scoped>
  .item-content{
    background-color: #fff;
    // width: 60%;
    padding: 0 26rpx;
    margin: 0 15rpx;
    border-radius: 30rpx;
    
    .header {
      font-size: 32rpx;
      font-weight: bold;
      border-bottom: 1px solid #efefef;
      height: 80rpx;
      line-height: 80rpx;
    }
    
    .list {
      .item {
        display: flex;
        align-items: center;
        height: 80rpx;
        line-height: 80rpx;
        .idx {
          margin-right: 20rpx;
        }
        .text {
          font-size: 28rpx
        }
        &:nth-child(-n+3){
          font-weight: bold;
          .idx{
            color: red;
          }
        }
      }
    }
  }
  
</style>
